<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section class="features-service ptb-75"> <div class="container"> <div class="row"> <!-- Features Service Single --> <div class="col-md-4 col-sm-6 col-xs-12"> <div class="features-service-single border"> <div class="fes-ser-titel text-center"> <span><i class="fa fa-leaf" aria-hidden="true"></i></span> <h4>services</h4> </div> <div class="fes-ser-hover text-center"> <div class="hvr-icon"> <i class="fa fa-tencent-weibo" aria-hidden="true"></i> <h4>services</h4> <p>Lorem bibendum . </p> </div> </div> </div> </div> <!-- Features Service Single --> <!-- Features Service Single --> <div class="col-md-4 col-sm-6 col-xs-12"> <div class="features-service-single border"> <div class="fes-ser-titel text-center"> <span><i class="fa fa-pagelines" aria-hidden="true"></i></span> <h4>services</h4> </div> <div class="fes-ser-hover text-center"> <div class="hvr-icon"> <i class="fa fa-tencent-weibo" aria-hidden="true"></i> <h4>Lservices</h4> <p>Lorem bibendum </p> </div> </div> </div> </div> <!-- Features Service Single --> <!-- Features Service Single --> <div class="col-md-4 hidden-sm hidden-xs"> <div class="features-service-single border"> <div class="fes-ser-titel text-center"> <span><i class="fa fa-scissors" aria-hidden="true"></i></span> <h4>services</h4> </div> <div class="fes-ser-hover text-center"> <div class="hvr-icon"> <i class="fa fa-tencent-weibo" aria-hidden="true"></i> <h4>services</h4> <p>Lorem bibendum . </p> </div> </div> </div> </div> <!-- Features Service Single --> </div> </div> </section>

.features-service-single { display: block; padding: 60px 0 65px; } .fes-ser-titel span i { color: #619d09; font-size: 40px; margin-bottom: 5px; } .fes-ser-titel h4 { color: #5e5e5e; font-weight: 600; margin: 0; } .fes-ser-hover { background: #619d09 none repeat scroll 0 0; display: block; height: 234px; left: 0; opacity: 0; overflow: hidden; padding: 45px 30px; position: absolute; top: -18px; transform: scale(0); transition: all 0.3s ease 0s; visibility: hidden; width: 389px; z-index: 999; } .features-service-single:hover .fes-ser-hover { opacity: 1; transform: scale(1); visibility: visible; } .hvr-icon h4 { color: #fff; margin-bottom: 15px; font-weight:600; } .hvr-icon i { color: #fff; font-size: 36px; margin-bottom: 20px; } .hvr-icon p { color: #fff; margin:0; } .ptb-75 { padding: 75px 0; } .text-center { text-align: center; } .border { border: 1px solid #f1f1f1; }